<template>
    <div>
        <el-row>
            <el-col :span="item.span" v-for="(item,i) in seeList" :key="i" class="col">
                <div class="title">  {{item.label}}  </div>
                <div class="val">  
                    <template v-if="item.slot">
                        <slot :name="item.slot"></slot>
                    </template>
                    <template v-else>
                        {{item.value}}
                    </template>
                </div>
            </el-col>      
        </el-row>
    </div>
</template>
 
<script>
/**
 * @overview 自动渲染
 * @author <woods> [<2213127617@qq.com>]
 * @param {Array} list - 显示的名称
 * @param {Object} formData - 显示的值
 */
export default {
    props:{
        formData: {
            type: Object,
            default: () => {
                return {}
            }
        },
        list: {
            type: Array,
            default: () => []
        },
    },
    created(){
        console.log(this.formData,"this.formData===============")
        console.log(this.list,"this.ist================")
    },
    computed:{
        seeList(){
            return this.list.reduce((acc, item, index) => {
                let span=12;
                if(item.width=="width:250px")
                    span=8
                else
                    span=24;
                console.log("ie==="+item.pre+"=="+item.preId)
                
                console.log(this.formData)
                console.log(this.formData[item.pre])
                if(this.formData[item.pre]){
                    acc.push({
                        ...item,
                        span:item.span ? item.span : span,
                        value:item.selectList ?  this.getSelectLabel(this.formData[item.pre][item.preId],item.selectList) : this.formData[item.pre][item.preId],
                        
                    });
                }
               
                return acc;
            }, []);
        }
    },
    data(){
        return {
             
        }
    },
    methods:{
        getSelectLabel(value,selectList){
         var list=   selectList.filter(item => item.value==value)
         return list.length>0 ? list[0].label : "列表无选项"
        }
    }
}
</script>
 
<style scoped>
.col{
    border: 1px solid #e6e9f0;
    height:35px;
    line-height: 35px;
    display: flex;
    
   
}
.col div{
    padding-left:20px;
}
.title{
    min-width: 150px;
    background-color: #f5f5f5;
    color: #1F2E4D;
}
.val{
    flex: 1;
    border-left: 1px solid #e6e9f0;
    color: #3D4966;
}
</style>